<template>
  <div class="outer_content_box">
    <div class="content_box">
      <el-row class="buttonsGroup">
        <el-button color="#626aef">添加</el-button>
        <el-button color="#626aef">编辑</el-button>
        <el-button color="#626aef">删除</el-button>
      </el-row>
      <div class="listGroup">
        <tableList
          :total="total"
          :pagesize="pagesize"
          :tableData="tableListData"
          :tableField="tableField"
        ></tableList>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, toRefs, onBeforeMount } from "vue";
import { useRouter } from "vue-router";
import { getRoleInfoList } from "../../../request/api";
import { useStore } from "vuex";
import tableList from "../../../common/pages/table.vue";
const total = ref(0);
const pagesize = ref(0);
const tableField = ref([]);
const tableListData = ref([]);
onBeforeMount(() => {
    getRoleInfoList().then((res) => {
    console.log(res);
    if (res.code == 200) {
      total.value = res.data.total;
      pagesize.value = res.data.total_page;
      tableListData.value = res.data.list;
      for (let key in res.data.column_name) {
        let obj = { label: "", field: "" };
        console.log(key);
        obj.field = key;
        obj.label = res.data.column_name[key];
        tableField.value.push(obj);
      }
    }
  });
});
</script>
<style lang="less" scoped>
@import url("../../../style/reset.less");
.buttonsGroup {
  width: 100%;
  padding: 10px;
}
.listGroup {
  padding: 10px;
}
button {
  color: #000;
}
</style>
